import { vars } from '@knno/jsx-ui/theme.css';
import { globalStyle, style } from '@vanilla-extract/css';

export const mainStyle = style({
	display: 'flex',
	flexDirection: 'column',
	alignItems: 'center',
	height: '100%',
});

globalStyle('div.panel', {
	display: 'flex',
	flexDirection: 'column',
	backgroundColor: vars.color.panelBackground,
	padding: '60px 30px',
	borderRadius: '1em',
	width: '25rem',
	boxShadow: `1px 1px 15px ${vars.color.shadow}`,
	marginBottom: '60px',
});

globalStyle('input', {
	border: 'none',
	fontFamily: "'Courier New', Courier, monospace",
	fontSize: '1.2rem',
});

globalStyle('div.input', {
	borderRadius: '5px',
	backgroundColor: vars.color.windowBackground,
	boxShadow: `inset 1px 1px 5px ${vars.color.shadow}`,
	padding: '10px',
});

globalStyle('div.line', {
	display: 'flex',
	height: '40px',
	alignItems: 'center',
	overflow: 'hidden',
});

globalStyle('div.line>span', {
	textAlign: 'left',
	verticalAlign: 'middle',
	padding: '0 20px',
});

globalStyle('div.line>input', {
	flex: 2,
	height: '30px',
	backgroundColor: 'transparent',
	outline: 'none',
	color: vars.color.text,
});

globalStyle('button', {
	backgroundColor: '#5080f0',
	color: 'white',
	margin: '20px 0',
	border: 'none',
	fontSize: '1.2rem',
	padding: '7px',
	borderRadius: '5px',
	cursor: 'pointer',
});

globalStyle('button:hover', {
	backgroundColor: '#4070f0',
});

globalStyle('button:active', {
	backgroundColor: '#3060f0',
});

globalStyle('div.error', {
	color: 'red',
});
